<template>
	<div class="container">
		<view class="system-height" :style="{height:statusBarHeight}"></view>
		<div class="container-panel">
			<div class="overview">
				<div class="item1">
					<div class="label1">当前乐豆</div>
					<div class="value1">{{ detail.beans }}</div>
				</div>
			</div>
			<div class="overview1">
				<div class="item">
					<div class="label">累计乐豆</div>
					<div class="value">{{ detail.browseNum }}</div>
				</div>
				<div class="item">
					<div class="label">累计消费</div>
					<div class="value">{{ detail.fansBlindBoxCount }}</div>
				</div>
				<div class="item">
					<div class="label">冻结乐豆</div>
					<div class="value">{{ detail.freezeToken }}</div>
				</div>
			</div>
		</div>

		<view class="body-tab">
			<view class="tabs">
				<view class="tab-item" :class="{ active: activeTab === 0 }" @click="switchTab(0)">
					分值明细
				</view>
				<view class="tab-item" :class="{ active: activeTab === 1 }" @click="switchTab(1)">
					分值提升
				</view>
			</view>
		</view>

		<div class="transaction-list">
			<div v-for="(record, index) in transactions" :key="index" class="record">
				<div class="info">
					<div class="type">{{ record.type }}</div>
					<div class="amount" :class="{ 'text-green': record.amount > 0, 'text-red': record.amount < 0 }">
						{{ formatAmount(record.amount) }}
					</div>
				</div>
				<div class="time">{{ formatTime(record.time) }}</div>
			</div>
		</div>
		<view class="score-detail">
			<view class="score-btn" @click="onTransfer(1)">转账</view>
			<view class="score-btn" @click="onTransfer(2)">提现</view>
		</view>
		<tui-drawer mode="bottom" :visible="assureDrawer" @close="closeAssure">
			<view class="ensure">
				<view @click="closeAssure" class="title1"><text class="iconfont icon-guanbi5"></text></view>
				<block v-if="types === 1">
					<input v-model="phone" class="en-input" placeholder="请输入手机号" />
					<input v-model="amount" class="en-input" placeholder="请输入额度" />
					<view class="en-btn" @click="onsubmit">确认转账</view>
				</block>
				<block v-else>
					<input v-model="amount" class="en-input" placeholder="请输入额度" />
					<view class="en-btn" style="margin-top: 80px;" @click="onwithdraw">确认提现</view>
				</block>
			</view>
		</tui-drawer>
	</div>
</template>

<script>
	import {
		exchangebeans,
		withdrawbeans,
		getinfo
	} from "@/api/new.js"
	let statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
	export default {
		data() {
			return {
				activeTab: 0,
				currentBeans: 0.00,
				totalBeans: 3,
				totalWaist: 0,
				type: "1",
				frozenBeans: 0,
				transactions: [{
						type: '转出到游戏',
						amount: -1.00,
						time: '2025-02-19 17:35:18'
					},
					{
						type: '游戏转入',
						amount: 1.00,
						time: '2025-02-19 17:35:14'
					},
				],
				statusBarHeight: statusBarHeight,
				assureDrawer: false,
				phone: null,
				amount: null,
				types: 1,
				detail: {}
			}
		},
		onLoad() {
			this.getdetail()
		},
		methods: {
			formatAmount(amount) {
				return `${amount.toFixed(2)}乐豆`;
			},
			formatTime(time) {
				return time.replace('T', ' ').substring(0, 19);
			},
			switchTab(index) {
				this.activeTab = index
			},
			getdetail() {
				getinfo().then(res => {
					console.log(res)
					if (res.code === 200) {
						this.detail = res.data
					}
				}).catch(err => {
					that.$util.Tips({
						title: err
					});
				});
			},
			onTransfer(item) {
				this.types = item
				this.assureDrawer = true
			},
			onwithdraw() {
				let that = this
				const obj = {
					amount: that.amount
				}
				withdrawbeans(obj).then(res => {
					if (res.code === 200) {
						setTimeout(() => {
							that.$util.Tips({
								title: "成功"
							});
							that.assureDrawer = false
						}, 1000)
					}
				}).catch(err => {
					that.$util.Tips({
						title: err
					});
				});
			},
			closeAssure() {
				this.assureDrawer = false;
			},
			// 转账
			onsubmit: function() {
				let that = this
				const obj = {
					amount: that.amount,
					phone: that.phone
				}
				exchangebeans(obj).then(res => {
					if (res.code === 200) {
						setTimeout(() => {
							that.$util.Tips({
								title: "成功"
							});
							that.assureDrawer = false
						}, 1000)
					}
				}).catch(err => {
					that.$util.Tips({
						title: err
					});
				});
			},
		}
	}
</script>

<style scoped>
	.container {
		max-width: 600px;
		margin: 0 auto;
	}

	.container-panel {
		background-color: #f44336;
		width: 100%;
		height: 430rpx;
		padding: 10px 20px 20px 20px;
	}

	.body-tab {
		/* z-index: 9; */
		width: 92%;
		margin: 0 auto;
		background-color: #FFFFFF;
		border-top-right-radius: 10px;
		border-top-left-radius: 10px;
		position: relative;
		top: -50px;
	}

	.tabs {
		display: flex;
		padding-top: 2rpx;
		height: 51px;
	}

	.tab-item {
		flex: 1;
		text-align: center;
		font-size: 30rpx;
		color: #333;
		padding: 24rpx 0;
		position: relative;
	}

	.tab-item.active {
		color: #f44336;
		font-weight: bold;
	}

	.tab-item.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 80rpx;
		height: 6rpx;
		background: #FFFFFF;
		border-radius: 3rpx;
	}


	.overview {
		text-align: center;
		align-items: center;
		background-color: #f44336;
	}

	.overview1 {
		width: 100%;
		display: flex;
	}

	.item {
		width: 33%;
		background: #f44336;
		padding: 15px;
		border-radius: 8px;
		text-align: center;
	}

	.item1 {
		background: #f44336;
		padding: 15px;
		border-radius: 8px;
		text-align: center;
	}

	.label {
		color: #fff;
		font-size: 13px;
		margin-bottom: 5px;
	}

	.label1 {
		color: #fff;
		font-size: 15px;
		margin-bottom: 5px;
	}

	.value {
		font-size: 16px;
		font-weight: 500;
		color: #fff;
	}

	.value1 {
		color: #fff;
		font-weight: 700;
		font-size: 50rpx;
	}

	.score-section {
		position: relative;
		top: -45px;
		width: 95%;
		margin: 0 auto;
		padding: 15px;
		background: #fff9eb;
		border-radius: 8px;
	}

	.score-detail {
		width: 100%;

		.score-btn {
			margin: 0 auto;
			width: 60%;
			height: 40px;
			text-align: center;
			color: #fff;
			line-height: 40px;
			background-color: #f44336;
			border-radius: 10px;
			margin-top: 10px;
		}
	}

	.score-info {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
	}

	.btn-upgrade {
		margin-left: auto;
		padding: 5px 15px;
		background: #ffd700;
		border: none;
		border-radius: 4px;
		cursor: pointer;
	}

	.tip {
		color: #999;
		font-size: 12px;
	}

	.transaction-list {
		width: 94%;
		margin: 0 auto;
		position: relative;
		top: -35px;
		border-top: 1px solid #eee;
		padding-top: 15px;
	}

	.record {
		padding: 10px 0;
		border-bottom: 1px solid #eee;
	}

	.info {
		display: flex;
		justify-content: space-between;
		margin-bottom: 5px;
	}

	.time {
		color: #999;
		font-size: 12px;
		text-align: right;
	}

	.text-green {
		color: #4CAF50;
	}

	.text-red {
		color: #f44336;
	}

	.ensure {
		width: 100%;
		height: 250px;
		background-color: #fff;
		padding-bottom: 22rpx;
		padding-bottom: calc(22rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		padding-bottom: calc(22rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/

		.title1 {
			font-size: 32rpx;
			text-align: center;
			height: 15px;
			background-color: #fff;
			margin: 20rpx 0 36rpx 0;
			position: relative;

			.iconfont {
				position: absolute;
				right: 30rpx;
				top: 0;
				font-size: 36rpx;
			}
		}

		.en-title {
			padding: 20px 20px 10px 20px;
			font-size: 16px;
			color: #333;

			text {
				color: #FFDEAD;
			}
		}

		.en-input {
			width: 90%;
			margin-left: 20px;
			margin-top: 15px;
			height: 76rpx;
			border: 2rpx solid #eee;
			border-radius: 5rpx;
			padding: 0 24rpx;
			font-size: 32rpx;
		}

		.en-btn {
			width: 80%;
			margin: 0 auto;
			height: 40px;
			margin-top: 25px;
			background-color: #333;
			border-radius: 20px;
			color: #fff;
			text-align: center;
			line-height: 40px;
		}
	}

	.mask {
		z-index: 9
	}

	.ensure.on {
		transform: translate3d(0, 0, 0);
	}
</style>
